<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: #777;
				font-size: 14px;
				font-family: arial;
			}
			
			.container {
				width: 680px;
				height: 1500px;
				margin: 50px auto;
			}
			
			.bottom {
				border-bottom: 1px solid #CCC;
			}
			
			.p3,.p5,.p8,.a{
				font-size: 18px;
				color: #5E605F;
				margin-top: 30px;
			}
			/*第一行*/
			
			.header {
				height: 80px;
				text-align: center;
				line-height: 30px;
			}
			
			.container .header .p1 {
				font-size: 18px;
				color: #5E605F;
			}
			/*第二行*/
			
			.gender {
				height: 120px;
			}
			
			.left-lable {
				display: inline-block;
				width: 180px;
				height: 120px;
				line-height: 120px;
			}
			
			.gender img {
				display: inline-block;
				width: 50px;
				height: 50px;
				vertical-align: middle;
				margin-right: 10px;
			}
			
			.gender .right {
				margin-left: 30px;
			}
			
			.gender img:hover {
				border: solid 2px cadetblue;
				border-radius: 50%;
			}
			
			.gender .left {
				border: solid 2px cadetblue;
				border-radius: 50%;
			}
			/*第三行*/
			
			.height {
				height: 140px;
			}
			
			.left-lable1 {
				display: inline-block;
				width: 180px;
				height: 140px;
				line-height: 140px;
			}
			
			.height input {
				display: inline-block;
				height: 50px;
				border: 2px solid #ccc;
				border-radius: 5px;
				text-align: center;
				margin-right: 5px;
				margin-left: 30px;
			}
			
			.height .input1 {
				width: 50px;
				margin-left: 0px;
				border: solid 2px cadetblue;
				border-radius: ;
			}
			
			.height .input2 {
				width: 70px;
			}
			
			.height .input3 {
				width: 90px;
			}
			
			.height input:hover {
				border: solid 2px cadetblue;
			}
			/*第三行*/
			
			.family {
				height: 160px;
			}
			
			.left-lable2 {
				display: inline-block;
				width: 180px;
				height: 160px;
				line-height: 160px;
			}
			
			.family-right {
				width: 500px;
				height: 160px;
				float: right;
			}
			
			.family .family-right .p4 {
				margin-bottom: 30px;
			}
			
			.family .family-right div {
				width: 35px;
				height: 35px;
				border: 2px solid #ccc;
				border-radius: 5px;
				display: inline-block;
				vertical-align: middle;
				margin-right: 10px;
			}
			
			.family .family-right .family-right1 {
				background: #4B93DB;
				text-align: center;
				line-height: 35px;
			}
			/*第四行*/
			
			.activity {
				height: 200px;
			}
			
			.left-lable3 {
				display: inline-block;
				width: 180px;
				height: 200px;
				line-height: 200px;
			}
			
			.activity-right {
				width: 500px;
				height: 200px;
				float: right;
			}
			
			.activity .activity-right1-2 {
				margin-top: 20px;
			}
			
			.activity .activity-right .activity1,
			.activity3 {
				width: 40px;
				height: 40px;
				border: 2px solid #ccc;
				border-radius: 50%;
				display: inline-block;
			}
			
			.activity .activity-right .activity3 {
				width: 32px;
				height: 32px;
				padding: 4px;
				background: #4B93DB;
				background-clip: content-box;
			}
			
			.activity .activity-right .activity5:hover {
				width: 32px;
				height: 32px;
				padding: 4px;
				background: #4B93DB;
				background-clip: content-box;
			}
			
			.activity .activity-right .activity2,
			.activity4 {
				display: inline-block;
				width: 180px;
			}
			
			.activity .activity-right .activity-right1-2 img {
				display: block;
			}
			
			.activity .activity-right .activity-right1-2 .p6,
			.p7 {
				font-size: 18px;
				color: #5E605F;
			}
			/*第五行*/
			
			.p8 {
				margin-bottom: 30px;
			}
			
			.diabetes {
				height: 180px;
			}
			
			.left-lable4 {
				display: inline-block;
				width: 180px;
				height: 180px;
				line-height: 180px;
			}
			
			.diabetes .diabetes-right {
				width: 500px;
				height: 180px;
				float: right;
			}
			
			.diabetes .diabetes-right1 div {
				width: 40px;
				height: 40px;
				border: 2px solid #ccc;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
			}
			
			.diabetes .diabetes-right .diabetes1 {
				width: 35px;
				height: 35px;
				padding: 4px;
				background: #4B93DB;
				background-clip: content-box;
			}
			
			.diabetes .diabetes-right div div:hover {
				width: 35px;
				height: 35px;
				padding: 4px;
				background: #4B93DB;
				background-clip: content-box;
			}
			
			.diabetes-right1 {
				height: 80px;
				line-height: 80px;
			}
			/*第六行*/
			.pregnancy{
				height: 180px;
			}
			.pregnancy-right{
				width: 500px;
				height: 180px;
				float: right;
			}
			.left-lable5{
				display: inline-block;
				width: 180px;
				height: 180px;
				line-height: 180px;
			}
			.pregnancy-container div{
				display: inline-block;
				vertical-align: middle;
			}
			.pregnancy2,.pregnancy4{
				width: 150px;
			}
			.pregnancy1,.pregnancy3{
				width: 35px;
				height: 35px;
				border: 2px solid #ccc;
				border-radius: 50%;
			}
			.pregnancy3{
				width: 35px;
				height: 35px;
				padding: 4px;
				background: #4B93DB;
				background-clip: content-box;
				border: 2px solid #ccc;
				border-radius: 50%;
			}
			.pregnancy1:hover{
				width: 35px;
				height: 35px;
				padding: 4px;
				background: #4B93DB;
				background-clip: content-box;
				border: 2px solid #ccc;
				border-radius: 50%;
			}
			.b{
				margin-bottom: 30px;
			}
			/*第七行*/
			.foot{
				height: 130px;
				padding-top: 80px;
				padding-left: 237px;
			}
			.foot img{
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="header">
				<p class="p1">So far so good, let's tell about you health</p>
				<p class="p2">We use this info to put your in a group with the people close yo you attributes(weird choice of word)</p>
			</div>
			<div class="gender bottom">
				<span class="left-lable">YOU GENGER</span>
				<img src="img/boy.svg" class="left" />Female
				<img src="img/girl.svg" class="right" />Male
			</div>
			<div class="height bottom">
				<span class="left-lable1">HEIGHT&WEIGHT</span>
				<input type="text" class="input1" />ft.
				<input type="text" class="input2" />in.
				<input type="text" class="input3" />ibs.
			</div>
			<div class="family bottom">
				<span class="left-lable2">FAIMILY WEIGHT</span>
				<div class="family-right">
					<p class="p3">Anyone in your family have happy?</p>
					<p class="p4">Check all the apply.And if you would rather not say.</p>
					<div class="family-right1">✔</div>
					<strong>Parents</strong>
					<div class="family-right2"></div>Siblings
				</div>
			</div>
			<div class="activity bottom">
				<span class="left-lable3">ACTIVIY LEVEL</span>
				<div class="activity-right">
					<p class="p5">Have active are you on a weekly basis?</p>
					<div class="activity-right1-2">
						<div class="activity1 activity5"></div>
						<div class="activity2">
							<img src="img/QQ图片20180727194314.jpg" />
							<p class="p6">Not very active</p>
							<p>Less than go minite of physical cativity prt week</p>
						</div>
						<div class="activity3 activity5"></div>
						<div class="activity4">
							<img src="img/QQ图片20180727194344.jpg" />
							<p class="p7">Active</p>
							<p>60+ minutes physical activity pet week</p>
						</div>
					</div>
				</div>
			</div>
			<div class="diabetes bottom">
				<span class="left-lable4">DIABETES</span>
				<div class="diabetes-right">
					<p class="p8">Hive you been diagnosed with diabetes before?</p>
					<div class="diabetes-right1">
						<div class="diabetes1"></div>&nbsp;&nbsp;<strong>Pre-disbetes</strong>
						<div class="diabetes2"></div>&nbsp;&nbsp;Type-2
						<div class="diabetes3"></div>&nbsp;&nbsp;Neither
					</div>
				</div>
			</div>
			<div class="pregnancy bottom">
				<span class="left-lable5">ACTIVIY LEVEL</span>
				<div class="pregnancy-right">
					<p class="a">Have active are you on a weekly basis?</p>
					<p class="b">Hive you been diagnosed with diabetes before?</p>
					<div class="pregnancy-container">
						<div class="pregnancy1"></div>
						<div class="pregnancy2">
							<p>
								<strong>Pregant</strong>
							</p>
							<p>
								or have given both with in the last 6 weeks
							</p>
						</div >
						<div class="pregnancy3 pregnancy1"></div>
						<div class="pregnancy4">
							<p>
								<strong>Not Pregant</strong>
							</p>
							<p>
								and have not given both with in the last 6 weeks
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="foot">
				<img src="img/QQ图片20180728194844.jpg"/>
			</div>
		</div>
		</div>
	</body>

</html>